import { PageTable, CustomDrawer, PageForm } from '@/components';
import React, { useState } from 'react';
import { Button, message } from 'antd';

// 定义数据类型
interface DataType {
  id: number;
  name: string;
  type: number;
  msg: string;
}

// 模拟请求数据
const fetchData = async (
  params: any,
): Promise<{ data: DataType[]; success: boolean; total: number }> => {
  console.log('请求参数:', params);
  return {
    data: [
      { id: 1, name: '测试1', type: 1, msg: '测试001' },
      { id: 2, name: '测试2', type: 2, msg: '测试002' },
    ],
    success: true,
    total: 2,
  };
};

const PageComponent: React.FC = () => {
  const columns = [
    { title: '协议名称', dataIndex: 'name' },
    {
      title: '协议类型',
      dataIndex: 'type',
      width: 120,
      component: 'Select', // 根据 component 在子组件判断，转换为下拉
      componentProps: {
        options: [
          { label: '启用', value: 0 },
          { label: '禁用', value: 1 },
        ],
      },
    },
    { title: '备注', dataIndex: 'msg', hideInSearch: true },
    { title: '创建人', dataIndex: 'type', hideInSearch: true },
    { title: '创建时间', dataIndex: 'type', hideInSearch: true },
    { title: '修改人', dataIndex: 'type', hideInSearch: true },
    { title: '修改时间', dataIndex: 'type', hideInSearch: true },
    {
      title: '操作',
      dataIndex: 'action',
      hideInSearch: true,
      render: (_: any, record: DataType) => (
        <Button size="small" type="primary" onClick={() => handleOpen('edit', record)}>
          编辑
        </Button>
      ),
    },
  ];

  const [open, setOpen] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [drawerType, setDrawerType] = useState<'add' | 'edit'>('add');
  const [editData, setEditData] = useState<Partial<DataType>>({});

  const handleOpen = (type: 'add' | 'edit', data?: DataType) => {
    setDrawerType(type);
    setEditData(data || {});
    setOpen(true);
  };

  const handleSubmit = async (values: DataType) => {
    console.log('7777');
    console.log(values);
    setLoading(true);
    try {
      await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟接口请求
      message.success(`${drawerType === 'add' ? '新增' : '编辑'}成功`);
      setOpen(false);
    } catch (error) {
      message.error('提交失败');
    } finally {
      setLoading(false);
    }
  };

  // 弹窗 -> form表单
  const formColumns = [
    {
      title: '项目名称',
      dataIndex: 'name',
      rules: [{ required: true, message: '请输入' }],
    },
    {
      title: '状态',
      dataIndex: 'type',
      component: 'Select',
      componentProps: {
        options: [
          { label: '启用', value: 0 },
          { label: '禁用', value: 1 },
        ],
      },
      rules: [{ required: true, message: '请选择' }],
    },
    {
      title: '项目描述',
      dataIndex: 'msg',
      component: 'TextArea',
    },
  ];

  return (
    <>
      {/* 列表 */}
      <PageTable columns={columns} request={fetchData} />

      {/* 弹窗 */}
      <CustomDrawer
        open={open}
        onClose={() => setOpen(false)}
        onSubmit={handleSubmit}
        type={drawerType}
        initialValues={editData}
        loading={loading}
      >
        {/* 表单 */}
        <PageForm initialValues={editData} onSubmit={handleSubmit} columns={formColumns} />
      </CustomDrawer>
    </>
  );
};

export default PageComponent;
